<script setup lang="ts">
import DepartmentContent from './component/department-content.vue'
import DepartmentSearch from './component/department-search.vue'
import DepartmentModel from './component/department-model.vue'
import { ref } from 'vue'

// 1.绑定UserModel
const modelRef = ref<InstanceType<typeof DepartmentModel>>()

// 2.新建部门(子传父)
const handleCreateClick = () => {
  // 2.1调用modelRef新建部门
  modelRef.value?.showModel()
}

// 3.编辑部门（子传父携带数据）
const handleEditClick = (data: any) => {
  // 2.1调用modelRef编辑部门并将数据传送
  modelRef.value?.showModel(false, data)
}
</script>

<template>
  <div class="department">
    <DepartmentSearch />
    <DepartmentContent
      @handle-create-click="handleCreateClick"
      @handle-edit-click="handleEditClick"
    />
    <DepartmentModel ref="modelRef" />
  </div>
</template>

<style lang="less" scoped>
.department {
  width: 100%;
  height: 100%;
}
</style>
